﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.Devices.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "设备管理";
}
@section scripts
{
    <abp-script src="/Pages/Devices/Index.cshtml.js"></abp-script>
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{ tableContanierTitle }}</span>
            </div>
        </div>
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="deviceAddPermission">新建</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="loadRoomDevices" icon="el-icon-refresh" size="mini"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="nav-container">
                <el-tree :data="treeData" :props="defaultProps" node-key="id" default-expand-all :highlight-current="true" :expand-on-click-node="false" v-on:node-click="nodeClicked">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{ node.label }}</cite>
                        </a>
                    </span>
                </el-tree>
            </div>
            <div class="table-container">
                <el-table :data="tableData" size="mini" class="el-table" v-show="department && room">
                    <el-table-column type="index">

                    </el-table-column>
                    <el-table-column label="名称"  property="name">

                    </el-table-column>
                    <el-table-column label="设备类型">
                        <template slot-scope="scope">
                            <el-link v-on:click="gotoDeviceTypeDetail(scope.row.deviceType.id)">{{scope.row.deviceTypeName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="编码"  property="outerCode">

                    </el-table-column>
                    <el-table-column width="150" label="排班计划" property="scheduleName">

                    </el-table-column>
                    <el-table-column label="厂商" property="manufacturer">

                    </el-table-column>
                    <el-table-column label="型号" property="model">

                    </el-table-column>
                    <el-table-column label="AETitle" property="aeTitle">

                    </el-table-column>   
                    <el-table-column label="状态"  property="status">
                        <template slot-scope="scope">
                            <span style="color:#409EFF;" v-if="scope.row.status===0">运行</span>
                            <span style="color:#E6A23C" v-else-if="scope.row.status===1">暂停</span>
                            <span style="color:#F56C6C" v-else-if="scope.row.status===2">停用</span>
                            <span style="color:yellow" v-else-if="scope.row.status===3">维修</span>
                            <span style="color:#909399" v-else="scope.row.status===4">报废</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="活动" property="type">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive"
                                       disabled>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" property="type">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" v-on:click="showEdit(scope.row.id)" v-if="deviceEditPermission"></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deleteDevice(scope.row.id)" v-if="deviceDeletePermission"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-show="!department" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
                <div v-show="department && !room" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
            </div>
        </div>

        <!-- 创建新设备-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" v-on:close="resetForm" :close-on-click-modal="false">
            <el-form :model="device" :label-width="formLabelWidth" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="device.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item  label="排班计划">
                                <el-select size="mini" v-model="device.scheduleId" placeholder="请选择" clearable>
                                    <el-option v-for="item in schduleOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="设备类型">
                                <el-select size="mini" v-model="device.deviceTypeId" placeholder="请选择">
                                    <el-option v-for="item in deviceTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="状态" >
                                <el-select size="mini" v-model="device.status">
                                    <el-option v-for="item in statusOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="编码" prop="outerCode">
                                <el-input v-model.trim="device.outerCode" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="AETitle">
                                <el-input v-model.trim="device.aeTitle" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="厂商" >
                                <el-input v-model.trim="device.manufacturer" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="型号">
                                <el-input v-model.trim="device.model" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    
                    <el-col :span="12">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="顺序">
                                <el-input v-model.trim="device.order" typeof="number" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="device.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<style>
    .el-select{
        width:100% !important;
    }
</style>